<template>
	<view class="gui-padding">
		<view class="gui-margin-top-large"></view>
		<form @submit="submit">

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">标题</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="formData.name1" name="name1"
						placeholder="请输入标题" />
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">举报类型</text>
				<view class="gui-form-body">
					<picker mode="selector" :range="gender" @change="pickerChange">
						<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
							<text class="gui-text">{{gender[genderIndex]}}</text>
							<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
						</view>
					</picker>
				</view>
			</view>
			

			<view class="gui-margin-top">
				<text class="gui-h6 gui-color-gray gui-bold">举报内容</text>
			</view>
			<view class="gui-bg-gray gui-margin-top">
				<textarea v-model="textareaVal" class="gui-text-area" placeholder="" />
			</view>

			<view class="gui-margin-top-large gui-flex gui-rows gui-space-between">
				<text class="gui-h6 gui-color-gray gui-bold">附件图片</text>
				<text class="gui-bg-blue gui-color-white demo-sub-btn gui-block-text" @tap="submit">{{subtxt}}</text>
			</view>
			<view class="gui-margin-top">
				<gui-upload-images @change="change" ref="uploadimgcom" @uploaded="uploaded"
					uploadServerUrl="https://您的域名/地址"></gui-upload-images>
			</view>


	

			<view class="gui-margin-top-large gui-flex gui-rows gui-nowrap gui-justify-content-end">
				<button type="default" class="gui-button gui-bg-blue" style="width:200rpx;" formType="submit">
					<text class="gui-icons gui-color-white gui-button-text">提交</text>
				</button>
			</view>
			<view style="height:100rpx;"></view>
		</form>
	</view>
</template>
<script>
	var graceChecker = require("@/GraceUI5/js/checker.js");
	export default {
		data() {
			return {
				textareaVal: '',
				subtxt: '',
				// 记录需要上传的图片数据
				needPploadedImgs: [],
				formData: {
					name1: "",
					name2: "888888",
					name3: "888888",
					name4: "888888@qq.com",
					name5: '请选择性别',
					name7: '123456'
				},
				gender: ['请选择类型', '助教', '商家'],
				genderIndex: 0
			}
		},
		methods: {
			change: function(e) {
				this.needPploadedImgs = e;
			},
			// 图片上传完毕执行 uploaded 函数
			uploaded: function(uploadedImgs) {
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);
				// 组合数据给后端 api 提交
				var sendData = {
					imgs: uploadedImgs,
					// 其他表单数据
					content: this.textareaVal
				};
				console.log('全部数据 :');
				console.log(sendData);
				// 至此数据以及收集完毕
				// 请自己完成数据提交工作
			},
			submit: function(e) {
				//定义表单规则
				var rule = [{
						name: "name1",
						checkType: "string",
						checkRule: "1,10",
						errorMsg: "**应为1-10个字符"
					},
					{
						name: "name2",
						checkType: "string",
						checkRule: "6,",
						errorMsg: "密码至少6个字符"
					},
					{
						name: "name3",
						checkType: "samewith",
						checkRule: "name2",
						errorMsg: "两次密码输入不一致"
					},
					{
						name: "name4",
						checkType: "email",
						checkRule: "",
						errorMsg: "邮箱格式错误"
					},
					{
						name: "name5",
						checkType: "notsame",
						checkRule: "请选择性别",
						errorMsg: "请选择性别"
					},
					// 正则表达式验证演示 : 例如检查必须是有效数字
					{
						name: "name7",
						checkType: "reg",
						checkRule: "^(-?\\d+)$",
						errorMsg: "必须是有效数字"
					}
				];
				//进行表单验证 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				formData.name5 = this.formData.name5;
				console.log(formData);
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					// 当验证 js 不适用某个检查时，使用自定义函数进行检查
					if (formData.name6.length < 1) {
						uni.showToast({
							title: "请选择爱好!",
							icon: "none"
						});
						// return 会终止函数继续运行哦
						return false;
					}
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}

			},
			pickerChange: function(e) {
				this.genderIndex = e.detail.value;
				this.formData.name5 = this.gender[this.genderIndex];
			},
		}
	}
</script>
<style>

</style>